<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- React核心包 最先引入  提供一个对象React -->
  <script src="../react资料_stu/依赖包/react.development.js"></script>
  <!-- ReactDOM包  提供一个对象ReactDOM -->
  <script src="../react资料_stu/依赖包/react-dom.development.js"></script>
  <!-- babel -->
  <script src="../react资料_stu/依赖包/babel.min.js"></script>

  <style>
    .outer {
      width: 20px;
      height: 50px;
      background-color: aqua;
    }
  </style>
</head>

<body>
  <br>
  <div id="app">

  </div>
</body>
<script type="text/babel">

  // //创建一个虚拟DOM
  // const vDom = React.createElement("h1", {}, "hello React");

  // //把虚拟DOM交给React 渲染到容器中
  // const root = ReactDOM.createRoot(document.getElementById('app'));
  // root.render(vDom)

  // //创建虚拟DOM
  // const vdom = React.createElement("h1", {}, "hellow react")
  // // 把虚拟DOM给react
  // const root = ReactDOM.createRoot(document.getElementById("app"))
  // // 渲染到容器上
  // root.render(vdom)

  //使用JS的方法创建虚拟DOM
  //第一种
  // const vDOM = React.createElement("div", {
  //   className: "outer"
  // }, "hello vDOM");
  // 第二种
  // const vDOM = React.createElement("div", {
  //   className: "outer"
  // }, "hello vDOM", "hello world ","text ","text");
  // 第三种
  // const vDOM = React.createElement("div", { className: "outer" }, "hellow React", React.createElement("div", {  }, "hellow React", React.createElement("div", { }, "hellow React")))

  //使用JSX
  //真实dom
  // let trueDOM =document.querySelector("#app")
  // //元素节点
  //   console.log(trueDOM,"trueDOM");
  // //虚拟dom
  // const jsx=(
  //   <div className="outer">
  //     <h1>JSX</h1>
  //     <p>JSX写React</p>
  //   </div>
  // )
  // let falseDOM = jsx
  // //是一个对象
  //   console.log("jsx",jsx);

  // jsx语法1:
  //       - 虚拟DOM中要混入js表达式，要用{},{}中只能写变量或者表达式,不能书写语句(表达式有返回值,语句没有返回值)
  /*  jsx语法2
         - 指定样式的类名不要用class，必须用className,指定for属性要用htmlFor(避免元素的自带属性和js的关键字冲突)
         - 在书写style行内样式的时候,style希望接受的是一个对象格式 所以案例写法:style={{color:"red"}}
         */

  /*   - JSX中所有的元素都要闭合
      - JSX语法外层必须有且只有一个外层父元素
      - 标签的首字母
      - 如果是小写, 则认为是html提供的标签
      - 如果是大写, 则认为是一个组件
      - jsx中注释: {/* <Hello/> ✳/} */

  let a = 8
  let b = 7
  let arr = ["前端", "后端", "大数据", "Java", "且图纸"]
  const jsx = (
    // <p>{4>7?"对":" 不对"}</p>
    // <p>{a>b?"对":" 不对"}hhhh{console.log(b)}</p>
    // <p className="outer">{console.log(a)}</p>
    // <p style={{"fontSize":"50px"}}>  我是行内样式{console.log(a)}</p>
    // <div>
    //   {/* <Tt></Tt> */}
    // </div>
    // <div>
    //   <br />
    //   <input type="text" defaultValue="必须要/噢" / >
    // </div>
    <div>
    {
      arr.map(item=>  {return <li>{item}</li>}
      )

    }
    {
      console.log(a,b)
    }

    </div>


  )




  //创建容器并渲染虚拟DOM
  ReactDOM.createRoot(document.getElementById('app')).render(jsx)

</script>

</html>